import { Button, Card, Form, Input, message } from 'antd'
import { reqAddHospital, reqgetHospital, reqUpdateHospital } from '@api/hospital/hospitalSet'
import { useForm } from 'antd/lib/form/Form'
import React, { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'

export default function AddOrUpdateHospital() {


    //编程式路由  导航
    let navigate = useNavigate()
    //创建表单 hook
    let [form] = useForm()

    let {id} = useParams()
    //获取表单数据方法
    let  onFinish = async ()=>{
        // 获取表单数据
        let values =  form.getFieldsValue();
        if(id){
            //修改数据 请求api
            await reqUpdateHospital({
                ...values,
                id
            });
            //成功提示
            message.success('修改成功！')
        }else{
            //添加数据 请求api
            await reqAddHospital(values)
            //成功提示
            message.success('添加成功！')
        }
      


     
        //  回到上一页
     navigate('/syt/hospital/hospitalset')
    }


    // 模拟生命周期
    useEffect(()=>{
        async function main(){
         let result = await   reqgetHospital(id as string)
            form.setFieldsValue(result)
        }

        main();
    })



















    return (
        <>
            <Card>
            <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 2 }}
                    wrapperCol={{ span: 22 }}
                    onFinish={onFinish}
                    >
                    <Form.Item
                        label="医院名称"
                        name="hosname"
                        rules={[{ required: true, message: '请输入医院名称!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="医院编号"
                        name="hoscode"
                        rules={[{ required: true, message: '请输入医院编号' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="api基础路径"
                        name="apiUrl"
                        rules={[{ required: true, message: '请输入api基础路径!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="联系人姓名"
                        name="contactsName"
                        rules={
                            [{ required: true, message: '请输入联系人姓名!' },
                            {pattern:/^[\u4e00-\u9fa5]{0,}$/, message:"请输入正确的姓名"}
                            ]
                        }
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="联系人手机"
                        name="contactsPhone"
                        rules={[{ required: true, message: '请输入联系人手机!' },
                            {pattern:/^1([358][0-9]|4[456789]|6[67]|7[0135678]|9[1589])\d{8}$/,message:"请输入正确的手机号！"}]}
                    >
                        <Input />
                    </Form.Item>

                    

                    <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>

                        <Button  className='ml' type="default">
                            返回
                        </Button>
                    </Form.Item>
                    </Form>
            </Card>
        </>
    )
}
